<template>
  <div>
    <router-view/>
    <van-tabbar v-if="menu.length>1" v-model="active" @change="onChange">
      <van-tabbar-item v-for="(item, index) in menu" :key="index" :icon="item.icon||'flower-o'">
        {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>


import Vue from "vue";
import {Tabbar, TabbarItem} from 'vant';
import {RouterMap} from "@/config/router.config";

Vue.use(Tabbar).use(TabbarItem);

export default {
  name: "Layout",
  data() {
    return {
      active: 0,
      menu: RouterMap.filter(item => !item.hidden)
    }
  },
  created() {
    this.active = RouterMap.findIndex(item => item.path == this.$route.path)
  },
  methods: {
    onChange(index) {
      this.$router.push({path: this.menu[index].path})

    }
  }

}
</script>

<style scoped>

</style>
